<template>
	<section id="detail">
		<!-- 搜索框 -->
		<van-search placeholder="请输入宝贝名称,关键字,关键词" @click="jumpRouter('/optional')">
		</van-search>
		<!-- 一级分类 -->
		<div class="leftBar">
			<ul>
				<li v-for="(item,index) in firstFloor" @click="computerChild(item)" :class="item.category_id == currentParent.category_id?'select':''">{{item.cat_name}}</li>
			</ul>
		</div>
		<!-- 子分类 -->
		<div class="rightBar">
			<div class="paddingCont">
				<span class="rightKuai" v-for="(item,index) in showList" @click="jumpOpen('optionalCats',{c: item.category_id,n: item.cat_name,pc :currentParent.category_id,pn :currentParent.cat_name})">
					<img :src="item.cat_icon" alt="">
					<p>{{item.cat_name}}</p>
				</span>
			</div>
		</div>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				supValue: '',
				allData: [],
				firstFloor: [],
				currentParent: {},
				showList: []
			};
		},
		components: {

		},
		methods: {
			onClickLeft(){
				this.$router.go(-1)
			},
			jumpRouter(uri,querys) {
				this.$router.push({path: uri,query:querys})
			},
			jumpOpen(uri,querys){
				let routeData = this.$router.resolve({
					name: uri,
					query: querys
				});
				window.open(routeData.href, '_blank');
			},
			getTbkcats(){
				let _this = this;
				// 加载遮罩
				let loadToast = this.$toast.loading({
					mask: true,
					message: "加载中...",
					duration: "30000"
				});
				this.service.tbcats({
				}).then(res => {
					loadToast.clear();
					if (res.code) {
						this.allData = res.data
						this.firstFloor = [];
						this.allData.forEach(function(item) {
							if(!item.parent_cid){
								_this.firstFloor.push(item)
							}
						});
						this.computerChild(this.firstFloor[0])
					}else{
						
					}
					
				})
			},
			computerChild(items){
				let _this = this;
				let id = items.category_id;
				if(id){
					_this.currentParent = items;
					_this.showList = []
					this.allData.forEach(function(item) {
						if(item.parent_cid == id){
							_this.showList.push(item)
						}
					});
				}
			}
		},
		mounted() {
			this.getTbkcats()
		},
		computed: {

		}



	};
</script>
<style scoped lang="scss">
#detail{
	height: 100%;
	position: relative;
	.van-search{
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		// background: #FF852A !important;	
		background: -webkit-linear-gradient(left, #FBA959 , #FB897D,#FA4EBE) !important; 
		background: -o-linear-gradient(right, #FBA959 , #FB897D,#FA4EBE) !important; 
		background: -moz-linear-gradient(right, #FBA959 , #FB897D,#FA4EBE) !important;
		background: linear-gradient(to right, #FBA959 , #FB897D,#FA4EBE) !important; 
	}

	.leftBar{
		width: 30%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		float: left;
		overflow-y: auto;
		ul{
			padding-top: 92px;
			padding-bottom: 120px;
			background: #F4F4F4;
			li{
				font-size: 30px;
				line-height: 120px;
				display: block;
				color: #333;
				background: #F4F4F4;
				text-align: center;
				border-left: 5px solid transparent;
			}

			.select{
				color: #FC3F78;
				background: #fff;
				border-left: 5px solid #FC3F78;
			}
		}
	}
	.rightBar{
		width: 70%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 30%;
		float: left;
		overflow-y: auto;
		.paddingCont{
			padding-top: 92px;
			padding-bottom: 120px;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			align-content: flex-start;
			justify-content: space-around;
		}
		.rightKuai{
			margin-top: 20px;
			width: 30%;
			text-align: center;
			height: 200px;
			img{
				width: 80%;
				height: auto;
			}
			p{
				text-align: center;
				color: rgb(99, 79, 79);
				font-size: 26px;
			}
		}
	}
}
</style>
